<template>
  <div class="app-container">
    <div style="text-align: center;margin-bottom: 30px">
      检查单详情
    </div>
    <el-row :gutter="10">
      <el-form :model="inspectForm" ref="inspectForm" label-width="100px">
        <el-col :span="12">
          <el-form-item label="检查单名称">
            <el-input type="text" v-model="inspectForm.title" placeholder="请输入检查单名称" readonly
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业主单位">
            <el-input type="text" v-model="inspectForm.inspectEnterpriseName" readonly
                      clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="检查人">
            <el-input type="text" v-model="inspectForm.inspectPersonName" readonly
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检查时间">
            <el-date-picker
                readonly
                v-model="inspectForm.inspectTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

      </el-form>
    </el-row>

    <uc-table url="admin/inspect/listData" name="设备" ref="equipmentTable" pageable table-border
              :search-form="searchForm" row-key="ucId">
      <template slot="searchForm">
        <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline filter-container">
          <!--搜索输入框-->
          <el-form-item>
            <el-input type="text" v-model="searchForm.name" placeholder="请输入设备名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.status" placeholder="请选择检测状态" style="width: 100%" clearable>
                          <el-option
                              v-for="dict in equipMainStatus"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="dict.dictValue"
                          />
                        </el-select>
          </el-form-item>
          <!--搜索按钮--新增按钮-->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" class="filter-item" @click="handleSearch()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="columns">
        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
        <el-table-column prop="name" label="设备名称" align="left"></el-table-column>
        <el-table-column prop="type" label="设备类型" align="left"></el-table-column>
        <el-table-column prop="code" label="设备编码" align="left"></el-table-column>
        <el-table-column prop="address" label="设备地址" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="检测状态" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            {{statusFormat(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="240" align="left" class-name="small-padding fixed-width">
<!--          <template slot-scope="scope">-->
<!--            <el-button v-if="scope.row.isvideo == '10'" size="mini" :disabled="scope.row.videoUrl==null" icon="el-icon-edit" type="primary" @click="handleVideo(scope.row)">查看视频</el-button>-->
<!--            &lt;!&ndash;编辑按钮&ndash;&gt;-->
<!--            <el-button size="mini" icon="el-icon-info" type="success" @click="handleInfo(scope.row)">详情</el-button>-->
<!--          </template>-->
        </el-table-column>
      </template>
    </uc-table>

    <div slot="footer" style="text-align: center" class="dialog-footer">
      <el-button @click="cancelEnterprise">取 消</el-button>
    </div>
  </div>
</template>

<script>
import UcTable from "@/components/UcTable/index.vue";
import {addData, updateData, getData} from "@/api/inspect";
import {getEquipmentTypeData} from "@/api/equipmentType";
import {getToken} from "@/utils/auth";

export default {
  name: "userEdit",
  components: {UcTable},
  data() {
    return {
      postShow: false,
      searchForm: {
        deleted:false,
        maintenanceId: this.$route.params.ucId
      },
      inspectForm: {
        ucId: "",
        title: "",
        inspectEnterpriseId: "",
        inspectEnterpriseName: "",
        inspectPersonId: "",
        inspectPersonName: "",
        inspectTime: "",
        status: ""
      },
      addLoading: false,
      equipmentTypeList: [],
      equipMainStatus: [],
    }
  },
  computed: {

  },
  created() {
    this.init()
    this.getDicts("equip_main_status").then(response => {
      this.equipMainStatus = response.data.data;
    });
  },
  methods: {
    cancelEnterprise() {
      window.history.back()
    },
    statusFormat(data, column) {
      return this.selectDictLabel(this.equipMainStatus, data);
    },
    handleSearch() {
      this.$refs.equipmentTable.getTableData(1)
    },
    init() {
      getData(this.$route.params.ucId).then(res => {
        this.inspectForm = res.data.data
      }).catch(error => {

      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 149px;
  height: 149px;
  line-height: 149px;
  text-align: center;
}

.avatar {
  width: 149px;
  height: 149px;
  display: block;
}
</style>
